import React from 'react';
import MotionPortal from './container/motionPortal';
import Left from './container/left';
import Right from './container/right';
import Main from './container/main';
import PreviewModal from './container/previewModal';
import css from './index.less';
import { inject, observer } from 'mobx-react';
/**
 * 动效编辑器容器
 */
@inject('store')
@observer
export default class MotionsRender extends React.Component {

  render() {
    const { motionVisible } = this.props.store.project;
    const props = {
      isOpen: motionVisible,
      closeOnOutsideClick: true,
      closeOnEsc: true,
    };
    return (
      <MotionPortal {...props}>
        <div className={css.layout}>
          <Left/>
          <Right/>
          <Main/>
          <PreviewModal/>
        </div>
      </MotionPortal>
    );
  }
}
